import TableComponents from '@/components/table/index.vue';
import {FormInstance, PopconfirmProps, TableColumnCtx} from 'element-plus';
import {Mutable} from '@vueuse/core';

export interface Dict {
    dict_code: string;
    dict_name: string;
    describe: string;
    items: Array<DictItem>;
    map: Map<string, DictItem>;
}

export interface DictItem {
    dict_code: string;
    key: string;
    label: string;
    sort_index: string;
    color: string;
    describe: string;
}

export type ActionType =
    | string
    | 'refresh'
    | 'add'
    | 'edit'
    | 'delete'
    | 'unfold'
    | 'quick-search'
    | 'change-show-column'
    | 'selection-change'
    | 'page-size-change'
    | 'current-page-change'
    | 'sort-change'
    | 'row-edit'
    | 'row-delete'
    | 'field-render-change'
    | 'search'
    | 'default';

/* 表格查询条件 */
export interface Condition {
    page_no?: number;
    page_size?: number;

    [key: string]: any;
}

/** 分页 */
export interface TablePage {
    current?: number;
    size?: number;
    total_num?: number;
    pager_count?: number;
    layout?: string;
}

/* TableForm */
export interface TableForm {
    // 表单ref，实例化表格时通常无需传递
    ref?: FormInstance | undefined;
    // 表单项label的宽度
    labelWidth?: number;
    // 当前操作:add=添加,edit=编辑
    operate?: string;
    // 表单数据，内含用户输入
    items?: any;
    // 提交按钮状态
    submitLoading?: boolean;
    // 默认表单数据(添加时)
    defaultItems?: any;
    // 表单加载状态
    loading?: boolean;
    // 参数名称
    param_name?: string;
}

export interface BaseTable {
    // 表格 ref，通常在 页面onMounted 时赋值
    ref?: typeof TableComponents;
    // 表格对应数据表的主键字段
    pk?: string[];
    // 表格数据
    data?: TableRow[];
    // 表格加载状态
    loading?: boolean;
    // 当前选中行
    selection?: TableRow[];
    // 表格列定义
    columns: TableColumn[];
    // 无数据显示内容
    emptyText?: string;
    // 是的分页
    pagination?: boolean;
    // 表格边框
    border?: boolean;
    // 是否展开所有子项，树状表格专用属性
    expandAll?: boolean;
    // 表格查询条件
    condition: Condition;
}

/** 表格行 */
export interface TableRow {
    [key: string]: any;
}

/* 表格列 */
export interface TableColumn extends Partial<TableColumnCtx<TableRow>> {
    // 是否显示
    show?: boolean;
    // 是否在下拉菜单的复选框显示 默认为true显示
    enableColumnDisplayControl?: boolean;
    // 渲染为: 'icon' | 'switch'| 'user_avatar' | 'image' | 'images' | 'tag' | 'tags' | 'url' | 'datetime' | 'color' | 'buttons'
    render?: 'icon' | 'switch' | 'user_avatar' | 'image' | 'images' | 'tag' | 'tags' | 'url' | 'datetime' | 'color' | 'buttons' | 'select' | 'task_time' | 'tag-state';
    // 操作按钮组
    buttons?: OptButton[];
    // 数据字典code
    dict_code?: string;
    // 头像大小
    avatar_size?: number;
    avatar_id?: string;
    // tags
    getTags?: (row: TableRow, prop: string) => Array<{ label: string }>;
    // 开关
    switch_active_value?: boolean | number | string;
    switch_inactive_value?: boolean | number | string;
    // 开关执行的事件
    switch_action?: string;
    // tag-state
    getTagStateText?: (row: TableRow) => string;
    getTagStateColor?: (row: TableRow) => string;
    select_action?: string;
    options?: Array<{label:string, value:string}>;
}

export type HeaderOptButton = 'refresh' | 'add' | 'edit' | 'delete' | 'quickSearch' | 'search' | 'columnDisplay' | 'task-start' | 'task-stop';

/* 搜索类型支持的值 */
type SearchType =
    | 'INPUT' // 等于
    | 'LIKE' // 模糊查询
    | 'IN_DICT' // 单选字典
    | 'SET_DICT' // 多选字典
    | 'DATE_TIME_RANGE'; // 日期时间范围

/* 表格右侧操作按钮 */
export interface OptButton {
    // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮,basicButton=普通按钮
    render: 'tipButton' | 'confirmButton' | 'moveButton' | 'basicButton';
    action_type: ActionType;
    title?: string;
    text?: string;
    class?: string;
    type: string;
    icon: string;
    size: 'default' | 'small' | 'large';
    popconfirm?: Partial<Mutable<PopconfirmProps>>;
    disabledTip?: boolean;
    // 自定义点击事件
    click?: (row: TableRow, field: TableColumn) => void;
    // 按钮是否显示，请返回布尔值
    display?: (row: TableRow, field: TableColumn) => boolean;
    // 按钮是否禁用，请返回布尔值
    disabled?: (row: TableRow, field: TableColumn) => boolean;
}

type DefaultOptButType = 'weigh-sort' | 'edit' | 'delete';

/*
 * 默认按钮组
 */
export const defaultOptButtons = (
    optButType: DefaultOptButType[] = ['weigh-sort', 'edit', 'delete'],
    size: 'default' | 'small' | 'large' = 'default'
): OptButton[] => {
    const optButtonsPre: Map<string, OptButton> = new Map([
        [
            'weigh-sort',
            {
                render: 'moveButton',
                action_type: 'row-weigh-sort',
                title: 'Drag sort',
                text: '',
                type: 'info',
                icon: 'fa fa-arrows',
                class: 'table-row-weigh-sort',
                disabledTip: false,
                size: 'default',
            },
        ],
        [
            'edit',
            {
                render: 'tipButton',
                action_type: 'row-edit',
                title: '编辑',
                text: '编辑',
                type: 'warning',
                class: 'table-row-edit',
                icon: 'table-edit',
                size: 'default',
            },
        ],
        [
            'delete',
            {
                render: 'confirmButton',
                action_type: 'row-delete',
                title: '删除',
                text: '删除',
                type: 'danger',
                class: 'table-row-delete',
                icon: 'table-del',
                size: 'default',
                popconfirm: {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    confirmButtonType: 'danger',
                    title: '确认选择删除的记录?',
                },
            },
        ],
    ]);

    const optButtons: OptButton[] = [];
    for (const key in optButType) {
        if (optButtonsPre.has(optButType[key])) {
            let button = optButtonsPre.get(optButType[key]);
            if (button) {
                button.size = size;
                optButtons.push(button);
            }
        }
    }
    return optButtons;
};